<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🍅 Initial T! Drive your tomato.</title>
  <script src="./chart.umd.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <!-- 计时界面 -->
    <div id="timer-interface" class="interface active">
      <div class="card">
        <h1>🍅 <u><i><big><b style="color:#2c3e50">Initial T!</b></big></i></u> </h1>
        
        <div class="timer-display">
          <div class="timer" id="timer">25:00</div>
          <div class="status" id="status">未启动</div>
        </div>
        
        <div class="buttons" id="buttons-container">
          <button id="start-btn" class="btn-primary">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
            开始工作
          </button>
        </div>
      </div>
    </div>
    
    <!-- 计划界面 -->
    <div id="plan-interface" class="interface">
      <div class="card">
        <h1>📋 计划</h1>
        
        <div class="plan-date-selector">
          <button class="date-nav-btn" id="plan-prev-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
          </button>
          <input type="date" id="plan-date-picker" class="plan-date-input">
          <button class="date-nav-btn" id="plan-next-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
          </button>
        </div>
        
        <div class="plan-table-container">
          <table class="plan-table" id="plan-table">
            <thead>
              <tr>
                <th style="width: 50px;">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="drag-handle">
                    <line x1="8" y1="2" x2="22" y2="2"></line>
                    <line x1="8" y1="12" x2="22" y2="12"></line>
                    <line x1="8" y1="22" x2="22" y2="22"></line>
                    <line x1="2" y1="8" x2="2" y2="8"></line>
                    <line x1="2" y1="16" x2="2" y2="16"></line>
                  </svg>
                </th>
                <th class="checkbox-cell"><input type="checkbox" id="select-all-plans"></th>
                <th style="width: 80px;">编号</th>
                <th style="width: 150px;">标签</th>
                <th style="width: 52.5%;">计划标题 <span style="color: var(--danger);">*</span></th>
                <th style="min-width: 40px;">所需时间（分钟）</th>
                <th style="min-width: 280px;">番茄钟周期 （已经执行 / 总共所需）</th>
              </tr>
            </thead>
            <tbody id="plan-table-body">
              <!-- 计划内容将通过JS动态生成 -->
            </tbody>
          </table>
        </div>
        
        <div class="plan-actions">
          <button id="add-plan-btn" class="btn-primary">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            增加计划
          </button>
          <button id="delete-plan-btn" class="btn-danger">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
            删除计划
          </button>
          <button id="manage-tags-btn" class="btn-secondary">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
            修改标签
          </button>
          <button id="manage-templates-btn" class="btn-secondary">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
            修改模板
          </button>
        </div>
      </div>
    </div>
    
    <!-- 设置界面 -->
    <div id="settings-interface" class="interface">
      <div class="card">
        <h1>⚙️ 设置</h1>     
        <div class="settings-container">
          <!-- 装饰性分隔线 -->
          <div class="settings-divider">
            <div class="divider-line"></div>
            <div class="divider-text">通知设置</div>
            <div class="divider-line"></div>
          </div>
          
          <div class="settings-row">
            <div class="setting-item">
              <label class="setting-label">系统通知</label>
              <div class="setting-input">
                <label class="toggle-switch">
                  <input type="checkbox" id="enable-notifications" class="notification-input" checked>
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">
                通知声音
                <span class="info-icon">!
                  <span class="info-tooltip">移动端有效，PC端请在浏览器设置</span>
                </span>
              </label>
              <div class="setting-input">
                <label class="toggle-switch">
                  <input type="checkbox" id="notification-sound" class="notification-input" checked>
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
          </div>
          
          <!-- 装饰性分隔线 -->
          <div class="settings-divider">
            <div class="divider-line"></div>
            <div class="divider-text">时间设置</div>
            <div class="divider-line"></div>
          </div>
          
          <div class="settings-row">
            <div class="setting-item">
              <label class="setting-label">工作时长</label>
              <div class="setting-input time-input-group">
                <div class="time-inputs">
                  <div class="minutes-container">
                    <input type="number" id="work-minutes" class="time-input" min="0" max="59" value="25">
                    <span class="time-subunit">分</span>
                    <div class="input-highlight"></div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">休息时长</label>
              <div class="setting-input time-input-group">
                <div class="time-inputs">
                  <div class="minutes-container">
                    <input type="number" id="rest-minutes" class="time-input" min="0" max="59" value="5">
                    <span class="time-subunit">分</span>
                    <div class="input-highlight"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="settings-actions">
          <button id="save-settings" class="save-settings">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" title="保存数据">
            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
            <polyline points="17 21 17 13 7 13 7 21"></polyline>
            <polyline points="7 3 7 8 15 8"></polyline>
            </svg>
            保存设置
          </button>
        </div>
      </div>
    </div>
    
    <!-- 数据界面 -->
    <div id="data-interface" class="interface">
      <div class="card">
        <h1>📊 数据</h1>
        
        <div class="data-menu">
          <!-- 数据处理菜单 -->
          <div class="data-actions">
            <button id="export-data-btn" class="export-export-btn">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
            </button>
            <button id="import-data-btn" class="import-export-btn">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
            </button>
            <input type="file" id="file-input" accept=".json">
            <button id="clear-data-btn" class="clear-data-btn">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
            </button>
          </div>

          <!-- 日历选择菜单 -->
          <div class="date-selector">
            <button class="date-nav-btn" id="prev-period">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
            </button>
            <input type="date" id="date-picker" class="date-input">
            <button class="date-nav-btn" id="next-period">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
            </button>
          </div>

          <!-- 周期选择下拉菜单 -->
          <div class="period-selector">
            <div class="period-select-btn" id="period-select-btn">
              <span id="selected-period-text"></span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="caret-icon">
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </div>
            <div class="period-dropdown" id="period-dropdown">
              <div class="period-option active" data-period="day">日</div>
              <div class="period-option" data-period="week">周</div>
              <div class="period-option" data-period="month">月</div>
              <div class="period-option" data-period="year">年</div>
            </div>
          </div>
        </div>

        <div id="details-content" class="details-content">
          <div class="stats-grid">
            <div class="stat-card sessions">
              <div class="stat-icon sessions">📋</div>
              <div class="stat-info">
                <div class="stat-value" id="work-sessions">0</div>
                <div class="stat-label">工作次数</div>
              </div>
            </div>
            <div class="stat-card work">
              <div class="stat-icon work">⏱️</div>
              <div class="stat-info">
                <div class="stat-value" id="total-work">0</div>
                <div class="stat-label">工作时长</div>
              </div>
            </div>
            <div class="stat-card rest">
              <div class="stat-icon rest">😴</div>
              <div class="stat-info">
                <div class="stat-value" id="total-rest">0</div>
                <div class="stat-label">休息时长</div>
              </div>
            </div>
            <div class="stat-card solve">
              <div class="stat-icon solve">🔧</div>
              <div class="stat-info">
                <div class="stat-value" id="total-solve">0</div>
                <div class="stat-label">解决时长</div>
              </div>
            </div>
          </div>
          
          <div class="chart-container">
            <canvas id="time-chart"></canvas>
          </div>
        </div>        
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item active" data-target="timer-interface">
        <div class="nav-icon">⏱️</div>
        <span class="nav-label">计时</span>
        <div class="nav-line"></div>
      </div>
      <div class="nav-item" data-target="plan-interface">
        <div class="nav-icon">📋</div>
        <span class="nav-label">计划</span>
        <div class="nav-line"></div>
      </div>
      <div class="nav-item" data-target="settings-interface">
        <div class="nav-icon">⚙️</div>
        <span class="nav-label">设置</span>
        <div class="nav-line"></div>
      </div>
      <div class="nav-item" data-target="data-interface">
        <div class="nav-icon">📊</div>
        <span class="nav-label">数据</span>
        <div class="nav-line"></div>
      </div>
    </div>
  </div>
    
  <div id="notification" class="notification">
    工作计时结束！
  </div>
  
  <!-- 确认删除计划模态框 -->
  <div id="delete-plan-modal" class="modal-overlay">
    <div class="modal">
      <h3>确认删除计划</h3>
      <p>确定要删除选中的计划吗？此操作不可恢复。</p>
      <div class="modal-buttons">
        <button id="cancel-delete-plan" class="btn-secondary">取消</button>
        <button id="confirm-delete-plan" class="btn-danger">确认删除</button>
      </div>
    </div>
  </div>
  
  <!-- 增加计划模态框 -->
  <div id="add-plan-modal" class="modal-overlay">
    <div class="modal">
      <h3>添加新计划</h3>
      <div class="add-plan-options">
        <div class="add-plan-option" id="custom-add-option">
          <h4>自定义添加</h4>
          <p>创建一个全新的计划</p>
        </div>
        <div class="add-plan-option" id="template-add-option">
          <h4>从模板添加</h4>
          <p>使用已保存的计划模板</p>
          <div class="template-selector" id="template-selector">
            <!-- 模板选项将通过JS动态生成 -->
          </div>
        </div>
      </div>
      <div class="modal-buttons">
        <button id="cancel-add-plan" class="btn-secondary">取消</button>
      </div>
    </div>
  </div>
  
  <!-- 自定义标签模态框 -->
  <div id="tag-management-modal" class="modal-overlay">
    <div class="modal">
      <h3>自定义标签</h3>
      <div class="tag-management" id="tag-management-container">
        <!-- 标签内容将通过JS动态生成 -->
      </div>
      <button class="add-tag-btn" id="add-tag-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
        添加标签
      </button>
      <div class="modal-buttons">
        <button id="cancel-tag-management" class="btn-secondary">取消</button>
        <button id="save-tag-management" class="btn-primary">保存标签</button>
      </div>
    </div>
  </div>
  
  <!-- 自定义计划模板模态框 -->
  <div id="template-management-modal" class="modal-overlay">
    <div class="modal">
      <h3>自定义计划模板</h3>
      <div class="template-management" id="template-management-container">
        <!-- 模板内容将通过JS动态生成 -->
      </div>
      <button class="add-template-btn" id="add-template-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
        添加模板
      </button>
      <div class="modal-buttons">
        <button id="cancel-template-management" class="btn-secondary">取消</button>
        <button id="save-template-management" class="btn-primary">保存模板</button>
      </div>
    </div>
  </div>
  
  <!-- 清除数据模态框 -->
  <div id="confirm-modal" class="modal-overlay">
    <div class="modal">
      <h3>确认清除数据</h3>
      <p>请选择要清除的数据范围：</p>
      <div class="clear-options">
        <label class="clear-option">
          <input type="radio" name="clearScope" value="current" checked> 当前周期数据
        </label>
        <label class="clear-option">
          <input type="radio" name="clearScope" value="all"> 所有数据
        </label>
      </div>
      <p id="confirm-message" style="color: #e74c3c;"></p>
      <div class="modal-buttons">
        <button id="cancel-delete" class="btn-secondary">取消</button>
        <button id="confirm-delete" class="btn-danger">确认清除</button>
      </div>
    </div>
  </div>

  <!-- 导入数据模态框 -->
  <div id="import-confirm-modal" class="modal-overlay">
    <div class="modal">
      <h3>确认导入数据</h3>
      <p id="import-confirm-message">导入将覆盖现有记录，是否继续？</p>
      <div class="modal-buttons">
        <button id="cancel-import" class="btn-secondary">取消</button>
        <button id="confirm-import" class="btn-primary">确认导入</button>
      </div>
    </div>
  </div>

  <script src="js/main.js"></script>
</body>
</html>